<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城 - 小米10 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
        <link rel="icon" href="https://s01.mifile.cn/favicon.ico">

        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .wrapper{
                width: 1519.2px;
                height: 100%;
            }
            .notice{
                width: 1519.2px;
                height: 120px;
            }
            .notice-background{
                width: 100%;
                height: 120px;
                display: block;
                background-image: url("notice.webp") ;
                background-size: auto 120px;
                background-position: center 0;
                background-repeat: no-repeat;
            }

            .text{
                width: 1519.2px;
                height: 40px;
                background: #333;
                font-size: 12px;
                color: #B0B0B0;
            }
            .text-content{
                width: 1226px;
                height: 40px;
                margin: 0 auto;
            }
            .text-content-left{
                float: left;
                height: 40px;
                line-height: 40px;
            }
            .sep{
                margin: 0 .3em;
                color: #424242;
            }
            .text a{
                font-size: 12px;
                color: #B0B0B0;
                text-decoration: none;
            }

            .links{
                width: 1519.2px;
                height: 100px;
                position: relative;
            }
            .link{
                width: 1226px;
                height: 100px;
                margin: 0 auto;
            }
            .link-logo{
                float: left;
                width: 62px;
                margin-top: 22px;
            }
            .links-logo{
                width: 55px;
                height: 55px;
                background-color: #ff6700;
                display: block;
                background-image: url("mi-logo.png");
                background-repeat: no-repeat;
                background-position: center;
            }
            .link-content{
                float: left;
                width: 850px;
                height: 100px;
            }
            .search{
                float: right;
                width: 296px;
                margin-top: 25px;
                height: 50px;
            }
            .nav-list{
                position: relative;
                z-index: 10;
                float: left;
                width: 1100px;
                height: 88px;
                margin: 0;
                padding: 12px 0 0 30px;
                list-style-type: none;
                font-size: 16px;
            }
            ul {
                display: block;
                margin-block-start: 1em;
                margin-block-end: 1em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
                padding-inline-start: 40px;
            }
            .nav-category{
                position: relative;
                float: left;
                width: 127px;
                padding-right: 15px;
                height: 88px;
            }
            li {
                display: list-item;
                text-align: -webkit-match-parent;
            }
            .nav-item{
                float: left;
            }
            .nav-item-link{
                display: block;
                padding: 26px 10px 38px;
                color: #333;
                transition: color 0.2s;
            }
            a a:hover{
                text-decoration: none;
            }
            .nav-text{
                color: #333;
                font-size: 16px;
                cursor: pointer;
            }
            .nav-text:hover{
                color: #ff6700;
            }
            .item-children{
                /*display: none;*/
                width: 1519.2px;
                /*height: 100px;*/
                position: absolute;
                left: -208.6px;
                height: 0px;
                overflow: hidden;
                border-top: 1px solid #ffffff;
            }
            .container{
                width: 1226px;
                margin: 0 auto;
                /*background: #2dacbf;*/
            }

            .wrapper-tool{
                width: 84px;
                height: 561px;
                position: absolute;
                right: 0;
                top: 0;
                background: #fff;
            }
            .first{
                list-style-type: none;
                display: flex;
                float: left;
            }
            .title{
                text-decoration: none;
                color: #757575;
                font-size: 12px;
                text-align: center;
                align-items: center;
            }
            .price{
                text-decoration: none;
                text-align: center;
                align-items: center;
                font-size: 12px;
                color: #ff6700;
            }
            .phone-img{
                float: left;
            }
            .nav-item a{
                text-decoration: none;
            }

        </style>

    </head>

    <body>

    <div class="wrapper">

        <div class="notice">
            <a class="notice-background" target="_blank" href="https://www.mi.com/a/h/13931.html"></a>
        </div>

        <div class="text">
            <div class="text-content">
                <div class="text-content-left">
                    <a  href="https://www.mi.com/index.html">小米商城</a>
                    <span class="sep">|</span>
                    <a>MIUI</a>
                    <span class="sep">|</span>
                    <a>IoT</a>
                    <span class="sep">|</span>
                    <a>云服务</a>
                    <span class="sep">|</span>
                    <a>金融</a>
                    <span class="sep">|</span>
                    <a>有品</a>
                    <span class="sep">|</span>
                    <a>小爱开放平台</a>
                    <span class="sep">|</span>
                    <a>企业团购</a>
                    <span class="sep">|</span>
                    <a>资质证照</a>
                    <span class="sep">|</span>
                    <a>协议规则</a>
                    <span class="sep">|</span>
                    <a>下载app</a>
                    <span class="sep">|</span>
                    <a>Selector Location</a>
                </div>
            </div>
        </div>

        <div class="links">
            <div class="link">

                <div class="link-logo">
                    <a class="links-logo" href="https://www.mi.com/index.html" title="小米官网"></a>
                </div>

                <div class="link-content">
                    <ul class="nav-list">
                        <li class="nav-category"></li>
                        <li class="nav-item">

                            <a class="nav-item-link">
                                <span class="nav-text">小米手机</span>
                            </a>

                            <div class="item-children">
                                <div class="container">
                                    <ul class="children-list clearfix">

                                        <li class="first">
                                            <a href="https://item.mi.com/10000213.html" target="_blank">
                                                <div class="phone-img">
                                                    <img src="mi.webp" alt="小米 10 Pro" width="160px" height="110px">
                                                </div>
                                                <div class="title">小米10 Pro</div>
                                                <p class="price">4999元起</p>
                                            </a>
                                        </li>
                                        <li class="first">
                                            <a href="https://item.mi.com/10000213.html" target="_blank">
                                                <div class="phone-img">
                                                    <img src="mi.webp" alt="小米 10 Pro" width="160px" height="110px">
                                                </div>
                                                <div class="title">小米10 Pro</div>
                                                <p class="price">4999元起</p>
                                            </a>
                                        </li>
                                        <li class="first">
                                            <a href="https://item.mi.com/10000213.html" target="_blank">
                                                <div class="phone-img">
                                                    <img src="mi.webp" alt="小米 10 Pro" width="160px" height="110px">
                                                </div>
                                                <div class="title">小米10 Pro</div>
                                                <p class="price">4999元起</p>
                                            </a>
                                        </li>
                                        <li class="first">
                                            <a href="https://item.mi.com/10000213.html" target="_blank">
                                                <div class="phone-img">
                                                    <img src="mi.webp" alt="小米 10 Pro" width="160px" height="110px">
                                                </div>
                                                <div class="title">小米10 Pro</div>
                                                <p class="price">4999元起</p>
                                            </a>
                                        </li>
                                        <li class="first">
                                            <a href="https://item.mi.com/10000213.html" target="_blank">
                                                <div class="phone-img">
                                                    <img src="mi.webp" alt="小米 10 Pro" width="160px" height="110px">
                                                </div>
                                                <div class="title">小米10 Pro</div>
                                                <p class="price">4999元起</p>
                                            </a>
                                        </li>
                                        <li class="first">
                                            <a href="https://item.mi.com/10000213.html" target="_blank">
                                                <div class="phone-img">
                                                    <img src="mi.webp" alt="小米 10 Pro" width="160px" height="110px">
                                                </div>
                                                <div class="title">小米10 Pro</div>
                                                <p class="price">4999元起</p>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="search"></div>

            </div>
        </div>

        <div class="wrapper-tool"></div>
    </div>

    <script type="text/javascript">
        (   function () {
            let first = document.querySelector(".nav-text");
            let block = document.querySelector(".item-children");
            let action = document.querySelector("nav-item");

            let action1 = function () {
                /*block.style.display = "block";*/
                block.style.height="200px";
                block.style.borderTop="1px solid #E0E0E0";
                first.style.color="#ff6700";
                block.style.transition="0.5s";
            }
            first.addEventListener("mouseover" , action1 , false);
            /*action.addEventListener("mouseover" ,action1 , false)*/

            let action2 = function () {
                /*block.style.display="none";*/
                block.style.height = "0px";
                first.style.color = "#333";
                block.style.borderTop = "1px solid #ffffff";
                block.style.transition = "0.5s";
            }
            first.addEventListener("mouseout" , action2 , false)
            /*action.addEventListener("mouseout" ,action2 , false)*/


        })();
    </script>

    </body>
</html>